<template>
    <!--动态菜单自己-->
    <div>
        <template v-for="(item, index) in users">
            <!-- 因为有子集和无子集渲染html标签不一样，所以要分为两种情况
           情况一：有子集的情况：                         -->

            <!-- <el-submenu :key="item.id" :index="item.id" v-if="item.children.length > 0">
                <template slot="title">
                    <span>{{ item.label }}</span>
                </template>
<el-menu-item-group v-for="itemid in item.children.children">
    <el-menu-item :index="itemid.uLr">{{ itemid.label }}</el-menu-item>
</el-menu-item-group>
<myitem v-bind:users="item.children"></myitem>
</el-submenu>-->

            <el-sub-menu router v-if="item.children.length > 0" :index="item.uLr">

                <template #title :index="item.uLr"><span @click="router.push('' + item.uLr)">{{ item.label }}</span>
                </template>

                <el-menu-item v-if="item.children.children > 0" v-for="inte in item.children.children"
                    :index="inte.uLr">{{
                        inte.label
                    }}</el-menu-item>
                <myitem v-bind:users="item.children"></myitem>
            </el-sub-menu>





            <!-- 情况二：没子集的情况 -->
            <el-menu-item-group v-else>
                <el-menu-item :index="item.uLr">{{ item.label }}</el-menu-item>
            </el-menu-item-group>
            <!--<el-menu-item v-else :index="item.uLr">
                <span slot="title">{{ item.label }}</span>
            </el-menu-item>-->

        </template>
    </div>
</template>

<script>
import { useRouter } from 'vue-router'
const router = useRouter()
export default {
    name: 'HelloWorld',
    props: {
        users: {           //这个就是父组件中子标签自定义名字
        }
    }
}


</script>
